<template>
    <div>
        <header-view></header-view>
        <div class="login-wrap">
            <el-breadcrumb separator="/"
                           style="font-size: 24px;margin-left: 12px;margin-bottom: 10px; padding-top: 15px">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 康复训练
                </el-breadcrumb-item>
            </el-breadcrumb>
            <div class="container">
                <el-button type="primary" icon="el-icon-d-arrow-left" @click="handleReturn"
                           style="margin-bottom: 18px;">返回上一层
                </el-button>
                <!--训练一级分类-->
                <div style="text-align: center">
                    <el-row v-for="j in rowNumber">
                        <el-col :span="6" v-for="(item,index) in tableData.slice((j-1)*3,j*3)">
                            <template>
                                <div style="margin-top: 50px">
                                    <el-button @click="choose(item)">
                                        <el-image class="table-td-thumb"
                                                  :src="require('../../../assets/img'+item.gameIcon)"></el-image>
                                        <br>
                                        <span style="font-weight: bold;font-size: 25px">{{item.gameName}}</span>
                                    </el-button>
                                </div>
                            </template>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <!-- 游戏选择弹出框 -->
        <el-dialog title="康复游戏选择" :visible.sync="addVisible" width="40%" :before-close="closeAdd">
            <el-form ref="addForm" :rules="addFormRules" :model="addForm" label-width="90px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="姓名:" prop="patientName">
                            <el-input v-model="addForm.patientName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="手机号:" prop="patientPhone">
                            <el-input v-model="addForm.patientPhone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="出生日期:" prop="patientBirth">
                            <el-date-picker style="width: 100%;"
                                            v-model="addForm.patientBirth"
                                            type="date"
                                            placeholder="选择日期"
                                            value-format="yyyy-MM-dd"
                                            :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="年龄:" prop="patientAge">
                            <el-input type="number" v-model="addForm.patientAge" ref="inputAge"
                                      @keyup.native="proving1"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="身份证号:" prop="patientCardNo">
                            <el-input v-model="addForm.patientCardNo"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="游戏选择:" prop="gameId">
                            <el-radio-group v-model="addForm.gameId">
                                <el-row v-for="j in gameRowNumber">
                                    <el-col :span="6" v-for="(item,index) in children.slice((j-1)*4,j*4)">
                                        <template>
                                            <div style="margin-top: 20px;margin-left: 16px;">
                                                <el-image class="table-td-thumb"
                                                          :src="require('../../../assets/img'+item.gameIcon)"></el-image>
                                                <br>
                                                    <el-radio style="border-left-width:10px;font-weight: bold;margin-left: 16px;margin-top: 5px" :label="item.gameId"
                                                              border="border">{{item.gameName}}
                                                    </el-radio>
                                            </div>
                                        </template>
                                    </el-col>
                                </el-row>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="训练时间:" prop="trainTime">
                            <el-input type="number" v-model="addForm.trainTime" @keyup.native="proving1" style="width: 80%"></el-input>
                            分钟
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                                    <el-button @click="closeAdd">取 消</el-button>
                                    <el-button type="primary" @click="saveAdd">确 定</el-button>
                                </span>
        </el-dialog>
    </div>


</template>

<script>
    import {menuData,doAdd} from "../../../api/hospital/menu";

    export default {
        name: 'user',
        data() {
            return {
                tableData: [],
                rowNumber: 0,
                gameRowNumber: 0,
                addVisible: false,
                addForm: {},
                children: [],
                fgameId:'',
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e7;
                    }
                },
                addFormRules: {
                    patientName: [
                        {required: true, message: '请输入患者姓名', trigger: 'blur'},
                    ],
                    patientCardNo: [
                        {required: true, message: '请输入患者身份证号', trigger: 'blur'},
                    ],
                    patientAge: [
                        {required: true, message: '长度在 1 到 3 个字符', trigger: 'blur'}
                    ],
                    gameId: [
                        {required: true, message: '请选择康复游戏', trigger: 'blur'}
                    ],
                }
            };
        },
        created() {
            this.getData();
        },
        watch: {
            'addForm.patientBirth': {
                handler: function () {
                    if (this.addForm.patientBirth !== undefined && this.addForm.patientBirth !== null && this.addForm.patientBirth !== "") {
                        //输入出生日期，自动填充年龄
                        const year = new Date().getFullYear();
                        const ptBirthYear = this.addForm.patientBirth.slice(0, 4);
                        this.$refs.inputAge.value = year - ptBirthYear;    // 给有 ref 属性的 input 赋值
                        this.addForm.patientAge = year - ptBirthYear;
                    }
                }
            },
        },
        methods: {
            // 获取后台数据
            getData() {
                menuData().then(res => {
                    if (res.success == true) {
                        this.tableData = res.data;
                        this.rowNumber = Math.ceil(res.data.length / 3);
                        this.pageTotal = res.total;
                    } else {
                        this.$message.error("查询失败！");
                        this.tableData = [];
                        this.pageTotal = 0;
                    }
                });
            },
            /*返回上一层 主页*/
            handleReturn() {
                this.$router.push('/manage');
            },
            //选择游戏
            choose(item) {
                if (item.children !== null && item.children !== '') {
                    this.fgameId=item.gameId;
                    this.children = item.children;
                    this.gameRowNumber = Math.ceil(item.children.length / 4);
                    this.addVisible = true;
                } else {//该分类下边无游戏
                    this.$message.warning('该分类下无游戏可选择');
                }
            },
            /*游戏确定*/
            saveAdd() {
                // validate 函数 表单验证
                this.$refs['addForm'].validate((valid) => {
                    if (valid) {
                        this.$set(this.addForm,"fgameId",this.fgameId);
                        //提交 到后台
                        doAdd(this.addForm).then(res => {
                            if (res.success == true) {
                                this.addVisible = false;
                                if (res.data.gameId!==undefined && res.data.gameId!==null ){
                                //跳转游戏exe
                                __his.beginTraining(res.data.gameName,res.data.gamePath,res.data.gameId,(result,msg)=>{
                                    /*alert("开始执行回调!");*/
                                    let obj = JSON.parse(msg);
                                    if(!result){
                                        this.$message.success("error",obj.message);
                                    }else{
                                        this.$message.success("success",obj.message);
                                    }
                                    this.$emit("cb");
                                });
                                }else{
                                    this.$message.error('评估ID获取失败');
                                }
                                // this.addForm = {};
                                // this.getData();
                                // this.$message.success('保存成功');
                            } else {
                                this.$message.error('游戏保存失败');
                            }
                        });
                    }
                });
            },
            closeAdd() {//关闭游戏选择弹出框
                this.$confirm('康复游戏选择未保存，请确定是否关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.addVisible = false;
                        this.addForm = {};
                        this.getData();
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消操作'
                        });
                    });
            },
            proving1(e) {
                var keynum = window.event ? e.keyCode : e.which;   //获取键盘码
                var keychar = String.fromCharCode(keynum);  //获取键盘码对应的字符
                if (keynum == 189 || keynum == 190 || keynum == 109 || keynum == 110) {
                    this.$message.warning('禁止输入小数以及负数,请重新输入');
                    e.target.value = ' ';
                    return;
                }
                if (keynum == 69) {
                    this.$message.warning('禁止输入e或E');
                    e.target.value = ' ';
                    return;
                }
            },
        }
    };
</script>

<style scoped>
    /*弹出框的文字*/
    /deep/ .el-dialog__title {
        font-size: 30px;
        color: black;
    }

    /deep/ .el-form-item__label {
        color: #39f0e1;
    }

    /*弹出框背景*/
    /deep/ .el-dialog {
        background: #829593;
    }

    /deep/ .el-dialog__header {
        padding-top: 14px;
    }

    .login-wrap {
        position: relative;
        width: 100%;
        height: 1000px;
        background-color: rgba(130, 149, 147, 0.59);
    }

    .header .logo {
        float: left;
        width: 400px;
        line-height: 50px;
        margin-top: 15px;
    }

    .btn-bell .el-icon-bell {
        color: #fff;
    }

    cascader {
        margin-left: 10px;
    }

    .user-avator img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .header-avator img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .handle-box {
        margin-bottom: 20px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }
</style>
